<template>
  <div>
    <van-tabbar v-model="active">
      <!-- 首页 -->
      <van-tabbar-item>
        <img class="first" src="../assets/img/shou_1.png" alt="" />
        相遇
      </van-tabbar-item>
      <!-- 商城 -->
      <!-- 需要红点 加 dot 就行 -->
      <van-tabbar-item>
        <img src="../assets/img/shop_0.png" alt="" />
        相知
      </van-tabbar-item>
      <!-- 地图 -->
      <van-tabbar-item>
        <img class="love" src="../assets/img/love1.png" alt="" />
       <!-- <span>Meet</span>  -->
      </van-tabbar-item>
      <!-- 消息  -->
      <van-tabbar-item badge="5" id="bad">
        <img class="xiaoxi" src="../assets/img/xiaoxi_0.png" alt="" />
        相惜
      </van-tabbar-item>
      <!-- 我的 -->
      <van-tabbar-item>
        <img src="../assets/img/my_0.png" alt="" />
        自己
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
    };
  },
};
</script>

<style scoped>
  /deep/ .van-info{
  position: absolute;
  top: 5px;
  right: -15px;
}
</style>
<style scoped>
.van-tabbar-item img {
  display: block;
  width: 50px;
  height: 50px;
}
.van-tabbar-item img.first {
  width: 44px;
}
.van-tabbar-item img.love{
  width: 90px;
  height: 90px;
}
.van-tabbar-item img.xiaoxi {
  width: 55px;
}

</style>